<template name="malls">
	<view>
		<hx-navbar title="三秋兮商城" :back="false" :fixed="true" color="#ffffff" :background-color="[242,110,16]">
		</hx-navbar>
		<scroll-view scroll-y class="page" @scroll="scrollDown" :show-scrollbar="true">
			<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
			 duration="500" current="0" v-if="banners.length > 0">
				<swiper-item v-for="(item,index) in banners" :key="index">
					<image :src="item.img_url" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		<view class="cu-card case" v-for="(item,index) in newshoplist" :key="index">
			<view class="cu-item shadow">
				<view class="image">
					<image :src="item.showImg"
					 mode="widthFix"></image>
					<view class="cu-tag bg-red" v-if="item.status">热售中</view>
					<view class="cu-tag " v-else>已售罄</view>
					<view class="cu-bar bg-shadeBottom"> <text class="text-cut">{{item.title}}</text></view>
				</view>
				<view class="cu-list menu-avatar" >
					<view class="shop-content" >
						<text class="tip-text">{{item.tip}}</text>
						<view style="width: 100rpx; padding: 0 20rpx 10rpx;">
							<view class='cu-tag radius sm bg-gradual-orange'>累计售出{{item.sales}}件</view>
						</view>
						<view class="price">
							<text class=" cuIcon-recharge" style="color:#f26e10; font-size: 40rpx;"></text>
							<text class="price-text">{{item.price}}</text>
							<text class="uni-text">/本</text>
						</view>
						<view class="buy-btn">
							<button class="cu-btn round bg-orange shadow">立即购买</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		</scroll-view>
	</view>
</template>

<script>
	import hxNavbar from "@/components/hx-navbar/hx-navbar.vue"
	export default {
		name: "malls",
		components: {
			hxNavbar
		},
		data() {
			return {
				isCard:false,
				banners: [{
						img_url: "http://chuantu.xyz/t6/721/1582854867x2890211722.jpg"
					},
					{
						img_url: "http://chuantu.xyz/t6/721/1582854867x2890211722.jpg"
					},
					{
						img_url: "http://chuantu.xyz/t6/721/1582854867x2890211722.jpg"
					}
				],
				name: "",
				newshoplist: [
					{
						id:"0",
						title:"终身会员限时抢，集章一元住民宿！",
						showImg:"http://chuantu.xyz/t6/721/1582854867x2890211722.jpg",
						status:1,
						tip:"注意：线下门店自取需在2020年1月24日后",
						sales:"99",
						price:"39.8",
						unit:"本"
					},
					
						{
							id:"0",
							title:"终身会员限时抢，集章一元住民宿！",
							showImg:"http://chuantu.xyz/t6/721/1582854867x2890211722.jpg",
							status:0,
							tip:"注意：线下门店自取需在2020年1月24日后",
							sales:"99",
							price:"39.8",
							unit:"本"
						}
					
				]
			}
		},
		created() {
			// this.http.apiGet('/v1/mall/pageindex', null, result => {
			// 	if (result.flag) {
			// 		this.banners = result.data.bannerlist;
			// 	} else {
			// 		this.sui.toast.show(result.msg);
			// 	}
			// }, true);
		},
		methods: {
			onShow() {
				console.log('show');
			},
			 scrollDown: function(e) {
			            // console.log(e)
			            // this.old.scrollTop = e.detail.scrollTop
			        },
		}
	}
</script>

<style scoped>
	.page {
		width: 750rpx;
		height: 2000rpx;
	}

	.top-img {
		width: 750rpx;
		height: 400rpx;
	}
	.shop-content{
		display: flex;
		flex-direction: column;
		padding-right: 10rpx;
		position: relative;
	}
	.price{
		padding: 0 20rpx;
	}
	.price-text{
		color: #f26e10;
		font-size: 40rpx;
		font-weight: 600;
	}
	.uni-text{
		color: #333333;
		font-size: 25rpx;
	}
	.tip-text{
		padding: 20rpx;
		color: #999999;
		font-size: 22rpx;
	}
	.buy-btn{
		position: absolute;
		bottom: 10rpx;
		right: 20rpx;
	}

</style>
